<template>
    <div class="body customDetial" v-if="ifrefresh">
        <div class="csd_top">
            <div>
                <i><img :src="orderimg" alt=""></i>
                <span>{{this.orderData.name}}</span>
                <p v-if="jiesuantimehide">{{this.orderData.jsfs}}</p>
            </div>
        </div>

        <div class="csd_cen">
            <div class="csd_box">
                <div class="csd_p1">最高额度</div>
                <div class="csd_p2">{{this.orderData.maxAmount}}万</div>
                <ul class="csd_p3">
                    <li>
                        <p>期限范围</p>
                        <div>{{this.orderData.termRange}}</div>
                    </li>
                    <li>
                        <p>月利率</p>
                        <div>{{this.orderData.rate}}%</div>
                    </li>
                    <li>
                        <p>通过率</p>
                        <div>{{this.orderData.passingRate}}%</div>
                    </li>
                </ul>
            </div>
        </div>
        
        <!--<div class="csd_shenqing">-->
            <!--<div class="csds_title">申请条件</div>-->
            <!--<ul>-->
                <!--<li v-for="(item,index) in this.orderData.conditionsList" :key="index">{{item}}</li>-->
                <!--&lt;!&ndash;<li>&ndash;&gt;-->
                    <!--&lt;!&ndash;<img src="../img/pro_dicon1.png" alt="">&ndash;&gt;-->
                    <!--&lt;!&ndash;<span>{{this.orderData.conditionsList[0]}}</span>&ndash;&gt;-->
                <!--&lt;!&ndash;</li>&ndash;&gt;-->
                <!--&lt;!&ndash;<li>&ndash;&gt;-->
                    <!--&lt;!&ndash;<img src="../img/pro_dicon2.png" alt="">&ndash;&gt;-->
                    <!--&lt;!&ndash;<span>{{this.orderData.conditionsList[1]}}</span>&ndash;&gt;-->
                <!--&lt;!&ndash;</li>&ndash;&gt;-->
                <!--&lt;!&ndash;<li>&ndash;&gt;-->
                    <!--&lt;!&ndash;<img src="../img/pro_dicon3.png" alt="">&ndash;&gt;-->
                    <!--&lt;!&ndash;<span>{{this.orderData.conditionsList[2]}}</span>&ndash;&gt;-->
                <!--&lt;!&ndash;</li>&ndash;&gt;-->
                <!--&lt;!&ndash;<li>&ndash;&gt;-->
                    <!--&lt;!&ndash;<img src="../img/pro_dicon4.png" alt="">&ndash;&gt;-->
                    <!--&lt;!&ndash;<span>{{this.orderData.conditionsList[3]}}</span>&ndash;&gt;-->
                <!--&lt;!&ndash;</li>&ndash;&gt;-->
            <!--</ul>-->
        <!--</div>-->
        <div class="scd_js">
            <p>申请条件</p>
            <div v-for="(item,index) in shenqing" :key="index">{{item}}</div>
        </div>

        <div class="scd_js">
            <p>详细介绍</p>
            <div v-for="(item,index) in this.orderData.introduction.split('；')" :key="index">{{item}}</div>
        </div>

        <div class="scd_js" v-show="cusnavOff">
            <p>佣金说明</p>
            <div>{{this.orderData.commission}}</div>
        </div>

        <div class="scd_js scd_form" v-show="!cusnavOff">
            <div class="scd_inputli">
                <span>姓名</span>
                <input type="text" placeholder="请输入姓名" v-model="username">
            </div>
            <div class="scd_inputli">
                <span>手机号码</span>
                <input type="text" placeholder="请输入电话号码" v-model="phone">
            </div>
            <div class="scd_btn" @click="lijisheniqng">立即申请</div>
        </div>

        <div class="scd_btm" v-if="cusnavOff">
            <div class="scdb_box">
                <div class="scd_li" @click="jiekuan()">我要借款</div>
                <div class="scd_li" v-if="repeatlinkstat" v-clipboard:copy="copylink" v-clipboard:success="onCopy" v-clipboard:error="onError">
                    <p>复制链接</p>
                </div>
                <div class="scd_li" v-if="!repeatlinkstat" @click="gomempay()">
                    <p>复制链接</p>
                </div>
                <div class="scd_li" v-if="repeatlinkstat" @click="goshare()">立即推广</div>
                <div class="scd_li" v-if="!repeatlinkstat" @click="gomempay()">立即推广</div>
            </div>
        </div>


        <div class="scd_js scd_form scd_propo" v-show="propoOff">
            <div class="scdp_titlebox"><i>我要借款</i><span @click="scdpclose()"></span></div>
            <div class="scd_inputli" style="margin-top: 0.2rem;">
                <span>姓名</span>
                <input type="text" placeholder="请输入姓名" v-model="username">
            </div>
            <div class="scd_inputli">
                <span>手机号码</span>
                <input type="text" placeholder="请输入电话号码" v-model="phone">
            </div>
            <div class="scd_btn" @click="lijisheniqng">立即申请</div>
        </div>

        <div style="height: 1rem;"></div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    import { Indicator } from 'mint-ui';
    export default {
        name: "customDetial",
        data(){
            return {
                cusnavOff:true,
                actionsheetoff:false,
                propoOff:false,
                copylink:"",
                orderData:{},
                ifrefresh:false,
                orderimg:'',
                proname:'',
                username:'',
                phone:'',
                link:'',
                produckid:'',
                productType:'',

                shenqing:[],
                userId:'',
                shareImg:'',

                repeatlinkstat:true,//复制链接
                jiesuantimehide:true,

                shenqingstatus:true,

                keykongzhi:true,
            }
        },
        mounted(){
            this.shenqingstatus = true;

            let hhrdata = localStorage.hhrdata;
            let ifhhr = this.$route.query.ifhhr;
            if(ifhhr){
                this.cusnavOff = false;
            }

            let ifuser = this.$route.query.ifuser;
            if(ifuser=="true"){
                this.jiesuantimehide = false;
                this.cusnavOff = false;
            }else{
                this.jiesuantimehide = true;
                //判断是否为单独产品二维码扫过来的
                if(!hhrdata){
                    //判断是否登录了
                    if(!this.$route.query.uid){
                        this.$router.push({path: "/login", query: {selected: "2"}});
                    }
                }
            }


            this.getDetial();
            //用户信息

            if(hhrdata){
                this.userId = JSON.parse(hhrdata).id
            }else{
                this.cusnavOff = false;
            }
            //判断复制链接操作
            if(!JSON.parse(hhrdata).level){
                this.repeatlinkstat = false;
            }
            //复制链接内容
            this.copylink = location.href+'&ifhhr=true&uid='+this.userId;
        },
        methods:{
            gomempay(){
                this.$router.push({path: "/member", query: {selected: "2"}});
            },
            goshare(){
                localStorage.proimg = JSON.stringify({
                    orderimg:this.shareImg,
                    name:this.proname,
                    produckid:this.produckid,
                    productType:this.productType,
                    uid:this.userId
                });
                if(this.common.checksestom()=="iPhone"){
                    this.$router.push({path: "/goShareios", query: {selected: "2"}});
                }else{
                    this.$router.push({path: "/goShare", query: {selected: "2"}});
                }
            },
            jiekuan(){
                this.propoOff = true;
            },
            scdpclose(){
                this.propoOff = false;
            },
            lijisheniqng(){
                if(!this.keykongzhi){
                    return
                }
                this.keykongzhi = false;
                Indicator.open('提交中。。。');
                //this.propoOff = false;
                if(this.username==""||this.phone==""){
                    setTimeout(()=>{
                        Indicator.close();
                        this.keykongzhi = true;
                    },3000)
                    Toast({
                        message: '请输入姓名和电话号码',
                        position: 'middle',
                        duration: 2000
                    });
                    return
                }
                if(!(/^1[3456789]\d{9}$/.test(this.phone))){
                    Toast({
                        message: '电话号码不正确',
                        position: 'middle',
                        duration: 2000
                    });
                    setTimeout(()=>{
                        Indicator.close();
                        this.keykongzhi = true;
                    },3000)
                    return
                }
                if(!this.shenqingstatus){
                    Indicator.close();
                    this.keykongzhi = true;
                    return
                }
                this.shenqingstatus = false;
                let obj = {
                    mobile: this.phone,
                    name: this.username,
                    pid: this.$route.query.selected,
                    uid: this.userId,
                }
                console.log(this.cusnavOff);
                if(this.cusnavOff==false){
                    if(this.$route.query.uid){
                        obj = {
                            mobile: this.phone,
                            name: this.username,
                            pid: this.$route.query.selected,
                            uid: this.$route.query.uid
                        }
                    }else{
                        obj = {
                            mobile: this.phone,
                            name: this.username,
                            pid: this.$route.query.selected,
                            uid: 0
                        }
                    }
                }

                //location.href = this.link;
                this.axios({
                    method: 'post',
                    url: 'api/productOrder',
                    data:obj,
                    withCredentials: true,
                }).then((response) => {
                    console.log(response.data)
                    if(response.data.code==0){
                        Toast({
                            message: "申请成功",
                            position: 'center',
                            duration: 2000
                        });
                        this.shenqingstatus = true;
                        setTimeout(()=>{
                            location.href = this.link;
                        },2000)
                    }
                    setTimeout(()=>{
                        Indicator.close();
                        this.keykongzhi = true;
                    },2000)
                }).catch((error) => {
                    console.log(error);
                });
            },
            onCopy(){
                Toast({
                    message: '复制成功',
                    position: 'middle',
                    duration: 2000
                });
            },
            onError(){
                Toast({
                    message: '复制失败',
                    position: 'middle',
                    duration: 2000
                });
            },
            getDetial(){
                this.axios({
                    method: 'get',
                    url: 'api/product/'+this.$route.query.selected,
                    data: {},
                    withCredentials: true,
                }).then((response) => {
                    //console.log(response)
                    this.orderData = response.data.data;
                    console.log(this.orderData);
                    this.orderimg =  "http://weijinwang.cn:8006"+response.data.data.image;
                    this.shareImg = "http://weijinwang.cn:8006"+response.data.data.poster;
                    this.proname = response.data.data.name;
                    this.ifrefresh = true;
                    this.link = response.data.data.link;
                    this.produckid = response.data.data.id;
                    this.productType = response.data.data.productType;

                    //申请条件
                    this.shenqing =  response.data.data.conditions.replace('↵','').split("；");
                }).catch((error) => {
                    console.log(error)
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .customDetial {
        background:rgba(244,244,244,1);
        padding-bottom: 1.2rem;
        padding-bottom: 1rem;
        .csd_top{
            width: 100%;
            height: 3rem;
            background: url("../img/cusdt_ban.png") center center no-repeat;
            background-size: 100% 100%;
            div{
                padding: 0.35rem;
                line-height: 1rem;
                overflow: hidden;
                i{
                    float: left;
                    width: 1rem;
                    height: 1rem;
                    border-radius:0.06rem;
                    overflow: hidden;
                }
                img{
                    width: 1rem;
                }
                span{
                    float: left;
                    font-size:0.4rem;
                    font-weight:500;
                    color:rgba(255,255,255,1);
                    margin-left: 0.3rem;
                }
                p{
                    float: right;
                    font-size:0.3rem;
                    font-weight:500;
                    color:rgba(255,255,255,1);
                }
            }
        }

        .csd_cen{
            height: 3rem;
            background:transparent;
            position: relative;
            .csd_box{
                width: 7rem;
                height: 3.8rem;
                background: #fff;
                position: absolute;
                top: -1.1rem;
                left: 50%;
                margin-left: -3.5rem;
                box-shadow:0 0 0.1rem 0 rgba(154,164,182,0.3);
                border-radius:0.1rem;
                .csd_p1{
                    text-align: center;
                    font-size:0.24rem;
                    font-weight:400;
                    color:rgba(187,187,187,1);
                    padding: 0.35rem 0;
                }
                .csd_p2{
                    font-size:0.66rem;
                    font-weight:500;
                    color:rgba(35,106,246,1);
                    text-align: center;
                }
                .csd_p3{
                    text-align: center;
                    margin-top: 0.4rem;
                    li{
                        float: left;
                        width: 33%;
                        p{
                            font-size:0.24rem;
                            font-weight:400;
                            color:rgba(187,187,187,1);
                        }
                        div{
                            margin-top: 0.15rem;
                            font-size:0.44rem;
                            font-weight:400;
                            color:rgba(255,172,0,1);
                        }
                    }
                }
            }
        }

        .csd_shenqing{
            min-height: 2.4rem;
            background: #fff;
            padding:0.35rem 0.3rem;
            .csds_title{
                font-size:0.3rem;
                font-weight:700;
                color:rgba(51,51,51,1);
            }
            ul{
                overflow: hidden;
                li{
                    width: 100%;
                    float: left;
                    min-height: 0.3rem;
                    line-height: 0.3rem;
                    margin-top: 0.36rem;
                    img{
                        float: left;
                        width: 0.6rem;
                        height: 0.6rem;
                    }
                    span{
                        margin-left: 0.3rem;
                        font-size:0.3rem;
                        font-weight:400;
                        color:rgba(51,51,51,1);
                    }
                }
            }
        }

        .scd_js{
            min-height: 1.8rem;
            background: #fff;
            margin-top: 0.2rem;
            padding:0.35rem 0.3rem;
            p{
                font-size:0.3rem;
                color:rgba(51,51,51,1);
                font-weight:700;
            }
            div{
                margin-top: 0.1rem;
                font-size:0.28rem;
                font-weight:400;
                color:rgba(51,51,51,1);
                line-height:0.5rem;
            }
        }

        .scd_btm{
            width: 100%;
            height: 1rem;
            position: fixed;
            left: 0;
            bottom: 0;
            .scdb_box{
                width: 7.5rem;
                margin: 0 auto;
                height: 1rem;
                .scd_li{
                    float: left;
                    width: 2.5rem;
                    line-height: 1rem;
                    font-size:0.32rem;
                    font-weight:400;
                    color: #fff;
                    text-align: center;
                    cursor: pointer;
                }
                div:nth-child(1){
                    color:rgba(35,106,246,1);
                    background: #fff;
                }
                div:nth-child(2){
                    background:rgba(253,185,44,1);
                }
                div:nth-child(3){
                    background:rgba(35,106,246,1);
                }
            }
        }

        .scd_form{
            .scd_btn{
                width:6rem;
                height:0.88rem;
                background:rgba(35,106,246,1);
                border-radius:0.1rem;
                font-size:0.36rem;
                font-weight:400;
                color:rgba(255,255,255,1);
                text-align: center;
                line-height: 0.88rem;
                cursor: pointer;
                margin: 0.5rem auto;
            }
            .scd_inputli{
                height: 0.7rem;
                margin: 0.3rem 0;
                text-align: center;
                span{
                    float: left;
                    width: 1.5rem;
                    height: 0.88rem;
                    line-height: 0.88rem;
                    text-align:justify;
                    text-justify:distribute-all-lines;/*ie6-8*/
                    text-align-last:justify;/* ie9*/
                    -moz-text-align-last:justify;/*ff*/
                    -webkit-text-align-last:justify;/*chrome 20+*/
                    font-size:0.34rem;
                    font-weight:400;
                    color:rgba(51,51,51,1);
                    margin-left: 0.5rem;
                }
                input{
                    width:4.5rem;
                    height:0.6rem;
                    padding: 0.1rem;
                    /*border:0.01rem solid rgba(96,150,255,1);*/
                    margin-top: 0.05rem;
                    border: 0;
                    font-size: 0.34rem;
                    margin-left: 0.2rem;
                }
            }
        }

        .scd_propo{
            width: 100%;
            position: fixed;
            left: 0;
            border-top: 1px solid #ccc;

            background: #ffffff;
            z-index: 100;
            bottom: 0;
            margin: 0;
            padding: 0;
            .scdp_titlebox{
                height: 0.6rem;
                padding: 0 0.3rem;
                line-height: 0.6rem;
                position: relative;
                text-align: center;
                i{
                    font-size: 0.38rem;
                }
                span{
                    float: right;
                    width: 0.6rem;
                    height: 0.6rem;
                    background: url("../img/close.png") center center no-repeat;
                    background-size: 90%;
                    cursor: pointer;
                    position: absolute;
                    right: 0.1rem;
                    top: 0;
                }
            }
            .scd_inputli{
                padding: 0 0.3rem;
            }
        }

    }
</style>
